前言

雖然我也不知道為什麼被抓來寫這次的鐵人，但因為我同事很熱血，加上他說沒有寫完的要被罰三杯（可能是雞可能是酒，也可能是雞加酒），所以我就來了。
前陣子寫CSS Challenge覺得很有趣，所以決定來寫一下我自己怎麼寫CSS Challenge的，希望喜歡玩的也可以一起來玩。

CSS Challenge

好用的工具介紹

寫CSS除了用在Chrome瀏覽器中，使用滑鼠右鍵點「檢查」去看CSS以外，還有很多外掛小工具是非常需要的，這邊先介紹一些簡單的小工具。

Color Picker

• Mac 內建的「顏色檢查器」：
  使用上很方便，滑鼠滑過去就可以看到滑鼠指到的地方的色碼，不過他只能顯示RGB，而且還不能轉成網頁常用的16進制顯示，方便的地方大概就是他是內建的可以直接使用，不方便的就是他沒有辦法把顏色存起來，你要自己記得那個顏色的RGB號碼。

• Chrome 外掛：「ColorZilla」
  是我目前蠻喜歡用的顏色選擇器，可以用RGB也可以用16進制，而且點選之後可以幫你把點選的顏色記錄起來，覺得非常方便。
  最方便的是他內建有一個「CSS漸層產生工具」，點選了之後就會開啟一個網頁，在那邊你可以自己視覺化的畫出你想要的CSS漸層樣式，然後直接複製剛剛做好的樣式來使用，非常快速又方便，適合快速的跟同事們溝通喜歡的樣式。

Ruler

雖然右鍵就可以察看網頁上每顆東西的寬高等等，但有些東西是圖片內的，無法使用inspect來看他的寬高，這時候就需要頁面上有一把尺，以前我還使用Windows的時候，有個東西叫做CoolRuler（的樣子），那時候覺得他非常的好用，現在不知道是否還存在（很久沒使用Windows的我），現在則是在Chrome的外掛程式中找到類似的東西。

• Page Ruler
  點了該擴充功能之後，滑鼠游標就會變成十字，你可以去選擇你要察看的寬高，他還會幫你顯示左上跟右下他們各自的定位點(X,Y），也會跟你說你框起來的範圍的寬高，個人覺得簡單方便，有需要的人可以參考。

Wrap up and go home

今天就先這樣，大家先準備好工具，明天開始就可以跟我一起玩了。